<template>
  <div class="logon">
    <el-form
      ref="account"
      :model="account"
      :rules="rules"
      label-position="right"
      label-width="120px"
    >
      <el-form-item prop="username" label="用户名：">
        <el-input v-model.trim="account.username"> </el-input>
      </el-form-item>

      <el-form-item prop="password" label="密码：">
        <el-input type="password" v-model="account.password"> </el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-edit" @click="accountSubmit()"
          >提交
        </el-button>
        <el-button
          type="warning"
          icon="el-icon-remove"
          @click="() => $refs.account.resetFields()"
          >重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
/**
 * 页面核心数据结构体说明文档
 *
 *
 */
// import New from './components/New.vue';
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Logon",
  components: {
    // New,Old,
  },
  props: {
    sampleP: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      sampleD: "value",
      account: {
        username: "zhangsan",
        password: "1212212",
      },
    };
  },
  computed: {
    // sampleC() {
    //     return this.sampleD+'--';
    // }
  },
  created() {},
  mounted() {},
  methods: {
    sampleM() {},
    accountSubmit() {
      this.$router.push("/home");
    },
  },
  watch: {
    // sampleC(newValue, oldValue) {
    //
    // }
  },
};
</script>

<!--<style scoped>-->
<style lang="scss" scoped>
.logon {
  height: 100vh;
  display: flex;
  justify-content: center;
  .el-form {
    margin-left: 300px;
    width: 400px;
    align-self: center;
  }
}
</style>
